<template>
        <div style="width: 100%; height: 100%; display: flex; justify-content: space-between;" >
            <div class="echart" id="mychart" style="width: 50%; height: 100%; left: 30;"></div>
            <div style=" width: 50%; right: 100%;"><re-echart ></re-echart></div>
        </div>
</template>
<script>
    import request from '@/utils/request'
    import {  onMounted } from 'vue'
    import {useStore} from 'vuex'
    import * as echarts from "echarts";
    import ReEchart from '@/view/ReEchart'
    export default{
        name:'DataInfo',
        components:{
            ReEchart,
        },
        setup() {
            const store = useStore();
            let mallData = []
            let mychart = {}
            let  pieData = [
                {
                    value: 0,
                    name: "餐饮"
                },
                {
                    value: 0,
                    name: "电子产品"
                },
                {
                    value: 0,
                    name: "服装"
                },
                {
                    value: 0,
                    name: "运动竞技"
                },
                {
                    value: 0,
                    name: "休闲娱乐"
                },
                {
                    value: 0,
                    name: "地摊经济"
                },
                {
                    value: 0,
                    name: "其他"
                }
            ]
            let pieName = []
            const initDate =()=> {
                for (let i = 0; i < mallData.length; i++) {
                    pieName[i] = mallData[i].type;
                }
                for(let i = 0; i < pieData.length; i++){
                    let a = mallData.filter((b)=>b.type === pieData[i].name)
                    pieData[i].value = a.length
                }
            }
            const initEcharts=() => {
            const option = {
                legend: {
                    data: pieName,
                    right: "10%",
                    top: "17%",
                    orient: "vertical"
                },
                title: {
                    text: "门店类别分布视图",
                    top: "10%",
                    left: "center"
                },
                series: [
                    {
                        type: "pie",
                        label: {
                            show: true,
                            formatter: "{b} : {c} ({d}%)"
                        },
                        radius: "50%",
                        data: pieData
                    }
                ]
            };
            mychart = echarts.init(document.getElementById("mychart"));
            mychart.setOption(option);
            window.addEventListener("resize", () => {
                mychart.resize();
            });
            }
            
            const getAllStore = () => {
                request({
                    url:'/store/getAll/',
                    method:'get',
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    mallData = resp
                    initDate()
                    initEcharts()
                }).catch(() => {});
            }
            
            let getOrders = () => {
                request({
                    url:'/order/getAll/',                                                                                                                                                                                                   
                    method:'get',
                    params:{
                        username:store.state.user.username,
                        role:store.state.user.role
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((res) => {
                    console.log(res, 123)
                }).catch(() => {});
            }
            
            let getUsers = () => {
                request({
                    url:'/user/get/all/',
                    method:'get',
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    }
                }).then((resp) => {
                    console.log(resp)
                })
            }
            getUsers()
            onMounted(() => {              
                getAllStore()
                getOrders()   
            })
            return {
                
            }
        },
    }
</script>
<style scoped> 

</style>